<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
</head>

<body>
    <div id="app" class="container">
        <label>编号：<input type="text" v-model="id"></label>
        <label>书名：<input type="text" v-model="bookname" @keyup.f2="addBook"></label>
        <label>价格：<input type="text" v-model="price"></label>
        <label>作者：<input type="text" v-model="author"></label>
        <button class="btn btn-primary" @click="addBook">添加</button>

        <hr>

        <label>搜索：<input type="text" class="form-control" placeholder="请输入书籍的名称" v-model="keywords" v-focus v-color="'blue'"></label>
        <button class="btn btn-default" style="margin-left: 10px">搜索</button>


        <table class="table table-hover">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>书名</th>
                    <th>价格</th>
                    <th>作者</th>
                    <th>添加时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in searchBook(keywords)" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.bookname}}</td>
                    <td>{{item.price}}</td>
                    <td>{{item.author}}</td>
                    <td>{{item.createTime | dataFormat("yyyy-mm-dd hh:MM:ss")}}</td>
                    <td>
                        <button class="btn btn-danger" @click="deleteBook(item.id)">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        // 全局自定义案件修饰符，其中的数字为js中的键盘按键对应的按键码
        Vue.config.keyCodes.f2 = 113;

        // 定义全局的过滤器
        Vue.filter("dataFormat", function(time, pattern = "yyyy-mm-dd hh:MM:ss") {
            var date = new Date(time);
            var y = date.getFullYear();
            var m = (date.getMonth() + 1).toString().padStart(2, '0');
            var d = date.getDate().toString().padStart(2, '0');

            if (pattern.toLowerCase() === 'yyyy-mm-dd') {
                return `${y}-${m}-${d}`;
            } else {
                var hh = date.getHours().toString().padStart(2, '0');
                var mm = date.getMinutes().toString().padStart(2, '0');
                var ss = date.getSeconds().toString().padStart(2, '0');
                return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
            }

        });

        // 使用Vue.directive()定义全局的指令，
        // 其中参数1：指令的名称（在定义的时候指令的名称不需要加v-前缀，但是在调用的时候必须在指令名称前加上v-前缀）
        // 参数2：是一个对象，表示身上有一些指令相关的函数，这些函数可以在特定的阶段执行相关的操作。
        Vue.directive("focus", {
            // 在这些函数中，第一个参数永远都是el，表示被绑定了指令的那个元素，并且这个el参数，就是一个原生的js对象
            bind: function(el) {
                el.focus();
            },
            inserted: function(el) {
                el.focus();
            }

        });


        Vue.directive("color", {
            update: function(el, binding) {
                el.style.color = binding.value;
            }
        });

        var vm = new Vue({
            el: '#app',
            data: {
                id: '',
                bookname: '',
                price: '',
                author: '',
                keywords: '',
                bookList: [{
                    id: '1122521',
                    bookname: "许三观卖血记",
                    price: "39.26",
                    author: "余华",
                    createTime: new Date()
                }, {
                    id: '1122522',
                    bookname: "活着",
                    price: "42.26",
                    author: "余华",
                    createTime: new Date()
                }, {
                    id: '1122523',
                    bookname: "围城",
                    price: "28.99",
                    author: "沈从文",
                    createTime: new Date()
                }, {
                    id: '1122524',
                    bookname: "骆驼祥子",
                    price: "35.00",
                    author: "鲁迅",
                    createTime: new Date()
                }, {
                    id: '1122525',
                    bookname: "三国演义",
                    price: "89.79",
                    author: "罗贯中",
                    createTime: new Date()
                }]
            },
            methods: {
                addBook() {
                    this.bookList.unshift({
                        id: this.id,
                        bookname: this.bookname,
                        price: this.price,
                        author: this.author,
                        createTime: new Date()
                    });
                    this.id = '';
                    this.bookname = '';
                    this.price = '';
                    this.author = ''
                },
                deleteBook(id) {
                    var index = this.bookList.findIndex(item => {
                        if (item.id == id) {
                            return true;
                        }
                    });
                    this.bookList.splice(index, 1);
                },
                searchBook(keywords) {
                    var searchList = [];
                    // 方式一
                    /* this.bookList.forEach(element => {
                        if (element.bookname.indexOf(keywords) != -1) {
                            searchList.push(element);
                        }
                    }); */

                    // 方式二
                    return this.bookList.filter(item => {
                        if (item.bookname.includes(keywords)) {
                            return item;
                        }
                    });
                }
            }
        });
    </script>
</body>

</html>